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Building Interactive Applications 


HTML5 and CSS3 are awesome for creating beautiful 
websites 
However, today’s users want an interactive Web experience 


¢ Interactivity allows a user to take an action and receive a response 


Implementing interactivity requires a programming language, 
such as JavaScript 


What Is JavaScript? 


¢ JavaScript is a loosely-typed 
scripting language that Is 
interpreted by a browser 

¢ It changes how elements in 
an HTML document act and 
respond to user input 


¢ We create scripts with 
JavaScript 


° Scripts are step-by-step instructions that 
tell a browser how to respond to events, 
such as a user clicking a button 


° The file extension for a script is .js 


Connecting JavaScript with HTML 


We can connect JavaScript to HTML documents in a couple of 
WayS. 

1. Embedding it with the <script> tag 

2. Linking a separate JavaScript file to the HTML document 


<script type="text/javascript"> 
@ document.write("Hello World Wide Web") ; 


</script> 


<head> 
@ <script type="text/javascript" 


src="Script.js"></script> 
</head> 


JavaScript Demo 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title></title> 
</head> 
<body> 
<hl>This is a boring website!</h1> 
<script type="text/javascript"> 
& document.write("Hello, World!"); 
</script> 
</body> 
</html> 
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Functions 


¢ A function is a group of statements that are combined to 
perform a specific task 
¢ A statement is a line of code that performs an action 
¢ Statements should end with a semicolon (;) 


¢ If different parts of a script repeat the same task, then you can 
reuse a function instead of repeating the same statements 


function doSomethingAwesome() { 
var name = prompt(“What 1S your name?”) ; 
alert(name + “, you just did something 
awesome!"); 


} 


How to Define a Function 


function keyword function name 


L — 

function helloworld() { 
alert( ‘Hello, 
World!’); 0 


everything between the curly braces is a code block 


Naming Functions 


A function can have any name, but there are a couple guidelines 
that must be considered: 


1. Don’t use any of the reserved words defined by JavaScript 


Standards. 
See the full list of JavaScript reserved words by clicking here 
2. The name must be made of letters, digits, underscores, or 


dollar signs 
It can’t start with a number though! 


Definition and Execution of Functions 


¢ The way that a function Is defined is different from how it is 
executed by a browser 


¢ A function’s definition outlines its name, any parameters it 
may take, and its statements 
° NOTE: a definition doesn’t perform any of a function’s statements 


¢ When a function Is called, the browser will execute all of the 
statements within the function 
Dalinnig ohhh € Urochtbr0 n 
<unpwt ony doSomeationigAwéeseme( )igk Me" 
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alert(name + “, you just did something 
awesome!"); 


Variables 


¢ Scripts have to temporarily store pieces of information 
¢ These bits of data can be stored as variables 
¢ It’s called a variable because its values can vary every time a program is run 
¢ Variables can be defined using the var syntax with a unique 
keyword, such as height or width 


How to Declare a Variable 


var height = 


— r6s- 4 


variable variable assignme variable 
nt 


keyword name value 
operator 


Rules for Naming Variables 


Variable names must 
start with a letter, dollar contain letters, numbers, 
sign ($), or an underscore dollar signs, and 
(7): underscores, but NOT 
dashes (-) or periods (.). 


Variable names can You cannot use keywords 


or reserved words. 


It must NOT start with a 


Que a e 


Variables are case 
sensitive, which means 
that thisVariable is 
different from 
ThisVariabLe. 


Use names that describe 
the information you are 
storing. 


If a variable name uses 
two or more words, 
capitalize the first letter 
of ever word AFTER the 
first word. 


Types of Data 


¢ Numbers[]1, 2, 3 


¢ Strings [] ‘Zombies freak me out!’ 
¢ Must always be surrounded by quote marks 


¢ Boolean [] true, false 


Comments 


; JavaScript —— 
Add comments to your script to | 
explain what it does /*These comments are typically | 
reserved for describing how an entire 
° It will also make YOUFr code easier for script file works or to comment out 
others to read and understand an entire block of script. */ 


Add a single-line comment by 


placing two forward slash //this function does something 


awesome! 


characters // in front of your function doSomethingAwesome() { 
comment var name = prompt(“What is your 
name?”’); 


¢ Anything after the slashes won’t be 
interpreted by the browser 

Add a multi-line comment by } 

starting with the /* characters and 

ending with the */ characters 


¢ Anything between these characters won’t 
be interpreted by the browser 


alert(name + “, you just did 
something awesome!"); 
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JavaScript Libraries 


¢ JavaScript Libraries are made of code that other programmers 
have already developed 


° libraries include pre-written functions and statements that you can use to create 
programs 


¢ Use a library by linking its file to your web page 
¢ One of the most popular JavaScript libraries is jQuery 


° JQuery allows you to use CSS-like selectors and its methods to perform functions with 
minimal code 
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Objects in JavaScript 


¢ An HTML element is an 
object, similar to a house ora 
car 


¢ Just as with real life objects, 
we can access and modify 
HTML objects that appear on 
a screen 


¢ The creation of interactive 
Web pages and apps relies 
on our ability to manipulate 
objects on a screen 


* Objects are models of things in the real 
world that were built using data 


* Objects are grouped into 


THIS IS AN 
OBJECT 


Document Object Model (DOM) 


¢ The Document Object Model 
(DOM) creates a model of a 
Web page 

¢ The DOM is used to update 
content, structure, and styles 
on the fly 


¢ The topmost object is the 
document object, which 
represents the page as a 
whole 


° It has child objects that represent 
individual elements on a page 


| attribute 


Locating and Accessing Elements 


¢ We can access objects in the DOM using an element’s ID 


¢ To do so, we can use the document object’s 
getElementById() method 


¢ This means that the element must have an ID 
¢ Using this method allows you to manipulate the contents of 
that element 


document.getElementBylId( ‘demo’ ) ; 


object method name parameter 


getElementById() Demo 


<body> 


<hl>Get today's date and add it to an element on the 
page.</hl> 


<p id="demo"></p> 
<script type="text/javascript"> 
document.getElementById("demo") .innerHTML=Date() ; 


</script> 


</body> 
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Events in Programming 


e Events are actions that a user Bava: Associated Events 
takes Handlers 


¢ JavaScript features event anRevdoun vaystrakes 
handlers, which respond to — onkeypress 


onsubmit form submission 


Specific user events onkeyup 
* For example, the onClick event handler onclick mouse or touchpad 
responds to clicks on screen Onmousedown clicks 
¢ Event handlers respond by OuMeye See 
executing functions onload page loading/unloading 
onunload 


onselect item selection 


Event Handlers Demo 


<body> 
<p>Select some of the text: 


<input type="text" value="Hello, World!" 
onselect="myFunction() "></p> 
<p i1d="demo"></p> 


<script> 
function myFunction() { 


document.getElementById('demo').innerHTML = 
"Selecting text 1S awesome!"; 
} 
</script> 
</body> 
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Updating Content in Elements 


¢ Use the innerHIML property to change content or insert new 
content between element tags 
¢ It can be used on any element 
¢ To change content, set the 1nnerHTML property to the desired 
string 
¢ To do this, we must use the equals symbol (=) 
¢ To remove content, set it to an empty string 


innerHIML Demo 


<body> 


<hl>Updating Content</h1> 
<p id="demo"></p> 


<script type="text/javascript'> 
document.getElementById ("demo") .innerHTML=*Using 
JavaScript 1S super fun!’; 

</script> 


</body> 


Adding 
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The createELement method 


¢ Make elements, like images, 
appear on screen with the 
document object’s 
createElement method 


¢ Add the element to the screen 


using the appendChild() 
method 


JavaScript 


function show _image(src, width, height, 
alt) { 
var img = 
document.createElement ("img") ; 
img.src = Src; 
img.width = width; 
img.height = height; img.alt = alt; 
// Adds it to the <body> tag 
document .body.appendChild (img) ; 
} 


HTML 


<button 
onclick="Show image (’dog.jpg’, 
276,110, ‘'Stella');"> 
Display an image! 

</button> 


createELement Demo 


<body> 


<hl>Creating Elements</h1> 
<p id="demo"></p> 


<button onclick="show image 
(’dog.jpg’,300,400, '‘Stella');">Dis 
play an image! 

</button> 


</body> 


<script> 
function show image(src, width, height, 
alt) { 

var img = 
document.createElement ("img") ; 

img.src = Src; 

img.width = width; 

img.height = height; 

img.alt = alt; 

// Adds it to the <body> tag 

document.body.appendChild(img) ; 
} 


</script> 
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